<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // call apply bind   => 存在于Function.prottotype => 所有的函数均可以访问

    // function fn(){
    //     console.log(this);
    // }

    // // 1.  console.dir(); 以键值对形式打印对象  
    // // 2.  函数也是一个特殊的实例化对象(引用类型)  => 它是由构造函数Function创建的
    // console.dir(fn); 

    // // 自函数起的原型链
    // console.log(fn.__proto__ === Function.prototype); 
    // console.log(Function.prototype.__proto__ === Object.prototype);
    // console.log(Object.prototype.__proto__ === null);


    // call apply 
    // call(obj,arg1,arg2...argN)  
    // 1.  调用原函数
    // 2.  在函数执行过程中,将该函数的this 强制指向call的第一个参数(obj)
    // 3.  如果原函数需要接收参数的话  那么在call()的第二个参数起依次向后排
    
    // apply(obj,[arg1,arg2,...,argN])
    // 1.  调用原函数
    // 2.  在函数执行过程中, 将该函数的this 强制指向apply的第一个参数(对象)
    // 3.  如果原函数需要接收参数的话  那么在apply() 需要将参数先依次放到数组中，在将数组作为第二参数传到apply()中

    // 借鸡生蛋 (将原函数借用过来调用一次  => 不会影响原函数)

    // bind(obj,arg1,arg2...argN) 
    // 1.  根据原函数得到一个新函数
    // 2.  在新函数执行过程中,将该函数的this 强制指向bind的第一个参数(obj)
    // 3.  如果新函数需要接收参数的话  那么在bind()的第二个参数起依次向后排

    // 授人以鱼不如授人以渔


    // function fn(a,b){
    //     console.log("fn被调用了",this);
    //     console.log("fn被调用了参数",a,b);
    // }

    // var obj = {
    //     fn:fn,
    // }
    // obj.fn();  // this -> obj
    
    // fn.call();  // 调用原函数 
    // obj.fn.call(); // 
    
    // obj.fn.call(document); // 调用原函数,在函数执行过程中将 this-> document
    // obj.fn.call(document.body); //调用原函数 在函数执行过程中将 this-> body

    // obj.fn.call(document,10,20); // 调用原函数,在函数执行过程中将 this-> document
    // obj.fn.call(document.body,100,200); //调用原函数 在函数执行过程中将 this-> body


    function fn(a,b){
        console.log("fn被调用了",this);
        console.log("fn被调用了参数",a,b);
    }

    // var newFn = fn.bind(document,10,20);
    // newFn();
    // newFn();
    // newFn();
    // newFn();

    var newFn = fn.bind(document);
    newFn(10,20);
    newFn(100,200);


    






</script>
</html>